<template>
  <d2-container class="wl" style="margin:20px 20px !important;">
    <div class="b-box-26">
      <div class="tit">
        <span>
        运单审核列表
        </span>
        <p></p>
      </div>

      <div class="boxnav">
        <div class="search">
          <div class="search-date">
            <el-date-picker
              v-model="ydhListDate"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd">
            </el-date-picker>
          </div>

          <div class="search-type">
            <el-select v-model="ydhTypeValue" :multiple="false" placeholder="请选择">
              <el-option
                v-for="item in ydhType"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>

          <div class="search-btn">
            <el-button type="primary" icon="el-icon-search" @click="search_list">搜索</el-button>
          </div>
          <!-- <div class="search-btn">
            <el-button type="primary" icon="el-icon-upload" @click="search_message" v-if="ydhTypeValue==3">上传</el-button>
          </div> -->
        </div>
        <div class="logistics-list-table">
          <div class="logistics-list-table-header">
            <!-- <div class="logistics-list-table-th" style="width:2%">
              <input type="checkbox" v-model="allYdhListCheck" />
            </div> -->
            <div class="logistics-list-table-th" style="width:6%">运单号</div>
            <div class="logistics-list-table-th" style="width:6%">客户运单号</div>
            <div class="logistics-list-table-th" style="width:6%">药监对接状态</div>
            <div class="logistics-list-table-th" style="width:12%">发货单位</div>
            <!-- <div class="logistics-list-table-th" style="width:6%">发货地址</div> -->
            <div class="logistics-list-table-th" style="width:12%">收货单位</div>
            <!-- <div class="logistics-list-table-th" style="width:6%">到货地址</div> -->
            <div class="logistics-list-table-th" style="width:8%">启运时间</div>
            <div class="logistics-list-table-th" style="width:8%">签收时间</div>
            <!-- <div class="logistics-list-table-th" style="width:4%">签收照片</div> -->
            <!-- <div class="logistics-list-table-th" style="width:5%">历史路由信息</div> -->
            <!-- <div class="logistics-list-table-th" style="width:5%">未来路由信息</div> -->
            <div class="logistics-list-table-th" style="width:6%">温区</div>
            <div class="logistics-list-table-th" style="width:8%">最高最低温度</div>
            <div class="logistics-list-table-th" style="width:6%">报文</div>
            <div class="logistics-list-table-th" style="width:6%">全程温度</div>
            <!-- <div class="logistics-list-table-th" style="width:4%">报文excel</div> -->
            <!-- <div class="logistics-list-table-th" style="width:4%">原始报文</div> -->
            <!-- <div class="logistics-list-table-th" style="width:4%">加密报文</div> -->
            <!-- <div class="logistics-list-table-th" style="width:5%">反馈结果</div> -->
            <div class="logistics-list-table-th" style="width:12%">操作</div>
          </div>
          <div class="table-row" style="  height: 567px;">
            <div class="logistics-list-table-body" v-for="(item, index) in ydhList" :key="index">
            <!-- <div class="logistics-list-table-td" style="width:2%">
              <input type="checkbox" v-model="item.isChecked" :vaule="item.slwbr_ydh" />
            </div> -->
            <div class="logistics-list-table-td" style="width:6%" >
              <span class="logistics-list-table-spana" @click="show_ydhinfo(item)">{{ item.slwbr_ydh }}</span>
            </div>
            <div class="logistics-list-table-td" style="width:6%">{{ item.slwbr_cuswbno }}</div>
            <div class="logistics-list-table-td" style="width:6%">
              <div style="color: rgb(216, 216, 191);" v-if="item.slwbr_yjdjzt == '发运中'">发运中</div>
              <div style="color: rgb(112, 147, 219);" v-if="item.slwbr_yjdjzt == '已签收'">已签收</div>
              <div style="color: rgb(255, 127, 0);" v-if="item.slwbr_yjdjzt == '待审核'">待审核</div>
              <div style="color: rgb(255, 0, 0);" v-if="item.slwbr_yjdjzt == '审核通过'">审核通过</div>
              <div style="color: #886600;" v-if="item.slwbr_yjdjzt == '审核不通过'">审核不通过</div>
              <div style="color: rgb(35, 142, 35);" v-if="item.slwbr_yjdjzt == '上传成功'">上传成功</div>
              <div style="color: #ffffff;" v-if="item.slwbr_yjdjzt == '上传中'">上传中</div>
              <div style="color: #ff7744;" v-if="item.slwbr_yjdjzt == '上传失败'">上传失败<p style="color: red;">{{ item.failReason }}</p></div>
            </div>
            <div class="logistics-list-table-td" style="width:12%">
              <el-popover
                placement="top"
                width="400"
                trigger="hover">
                <el-descriptions column="1">
                  <el-descriptions-item label="社会信用代码">{{ item.slwbr_fhdwxydm }}</el-descriptions-item>
                  <el-descriptions-item label="发货地址">{{ item.slwbr_fhdz }}</el-descriptions-item>
                </el-descriptions>
                <span class="logistics-list-table-spana" slot="reference">{{ item.slwbr_fhdw }}</span>
              </el-popover>
            </div>
            <div class="logistics-list-table-td" style="width:12%">
              <el-popover
                placement="top"
                width="400"
                trigger="hover">
                <el-descriptions column="1">
                  <el-descriptions-item label="社会信用代码">{{ item.slwbr_shdwxydm }}</el-descriptions-item>
                  <el-descriptions-item label="到货地址">{{ item.slwbr_dhdz }}</el-descriptions-item>
                </el-descriptions>
                <span class="logistics-list-table-spana" slot="reference">{{ item.slwbr_shdw }}</span>
              </el-popover>
            </div>
            <div class="logistics-list-table-td" style="width:8%">{{ item.slwbr_thsj }}</div>
            <div class="logistics-list-table-td" style="width:8%">{{ item.slwbr_qssj }}</div>
            <div class="logistics-list-table-td" style="width:6%">
              {{ item.slwbr_wdmin }}°C ~ {{ item.slwbr_wdmax }}°C
            </div>
            <div class="logistics-list-table-td" style="width:8%">
              <div style="color: rgb(35, 142, 35);"  v-if="item.slwbr_wdmin <= item.mintem && item.slwbr_wdmax >= item.maxtem">{{ item.mintem }}°C ~ {{ item.maxtem }}°C</div>
              
              <div style="color: rgb(216, 216, 191;"  v-else-if="!item.mintem || !item.maxtem">--</div>
              <div style="color: rgb(255, 0, 0);"  v-else-if="item.slwbr_wdmin > item.mintem || item.slwbr_wdmax < item.maxtem">{{ item.mintem }}°C ~ {{ item.maxtem }}°C</div>
            </div>
            <div class="logistics-list-table-td" style="width:6%">
            <span class="logistics-list-table-spana" @click="show_bwinfo(item)">查看</span>
            </div>
            <div class="logistics-list-table-td" style="width:6%">
            <span class="logistics-list-table-spana" @click="show_qcwd(item)">查看</span>
            </div>
            <!-- <div class="logistics-list-table-td" style="width:4%">报文excel</div>
            <div class="logistics-list-table-td" style="width:4%">原始报文</div>
            <div class="logistics-list-table-td" style="width:4%">加密报文</div>
            <div class="logistics-list-table-td" style="width:5%">反馈结果</div> -->

            <div class="logistics-list-table-td" style="width:12%">
            <div v-if="item.slwbr_yjdjzt == '发运中'">
            </div>
            <div v-if="item.slwbr_yjdjzt == '已签收'">
              <el-button type="primary" @click="message_action(item,index,'cb')">催办</el-button>
            </div>
            <div v-if="item.slwbr_yjdjzt == '待审核'">
              <el-button type="primary" @click="message_action(item,index,'sh_pass')">审核通过</el-button>
              <el-button type="primary" @click="message_action(item,index,'sh_nopass')">审核不通过</el-button>
            </div>

            <div v-if="item.slwbr_yjdjzt == '审核通过'">
              <el-button type="primary" @click="message_action(item,index,'to_dsh')">转为待审核</el-button>
              <el-button type="primary" @click="message_action(item,index,'upload')">上传</el-button>
            </div>
            <div v-if="item.slwbr_yjdjzt == '审核不通过'">
            </div>
            <div v-if="item.slwbr_yjdjzt == '上传中'">
            </div>
            <div v-if="item.slwbr_yjdjzt == '上传失败'">
            <el-button type="primary" @click="message_action(item,index,'reupload')">重新上传</el-button>
            </div>
            <div v-if="item.slwbr_yjdjzt == '上传成功'">
            
            </div>
            
            </div>
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="pagination-center">
          <el-pagination  @current-change="handleCurrentChange" :current-page="currentPage"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="total">
          </el-pagination>
        </div> -->

    </div>


    <el-dialog
      title="运单信息"
      :visible.sync="ydh_info_show"
      width="50%"
      :before-close="handleClose">
      <el-form ref="ydhinfo" :model="ydhinfo" label-width="80px">
        <el-form-item label="历史路由">
        <el-timeline :reverse="false">
          <el-timeline-item
            v-for="(v, index) in ydhinfo.ydlsinfo"
            :key="index"
            :timestamp="v.timestamp">
            {{v.content}}
          </el-timeline-item>
        </el-timeline>
        </el-form-item>
        <el-form-item label="未来路由">
        <el-timeline :reverse="false">
          <el-timeline-item
            v-for="(v, index) in ydhinfo.ydwlinfo"
            :key="index"
            :timestamp="v.timestamp">
            {{v.content}}
          </el-timeline-item>
        </el-timeline>
        </el-form-item>
        <el-form-item label="签收照片">
          <div class="demo-image__lazy">
            <el-image v-for="url in ydhinfo.qszp" :key="url" :src="url" lazy></el-image>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>


    <el-dialog
      title="报文信息"
      :visible.sync="bw_info_show"
      width="50%"
      :before-close="bwhandleClose">
      <el-form ref="bwinfo" :model="bwinfo" label-width="140px">
        <el-form-item label="报文excel">
          <a v-if="bwinfo.extFile" :href="bwinfo.extFile" target="_blank">下载</a>
          <span v-else>无</span>
        </el-form-item>
        <el-form-item label="请求报文">
          <a v-if="bwinfo.reqBodyFile" :href="bwinfo.reqBodyFile" target="_blank">下载</a>
          <span v-else>无</span>
        </el-form-item>
        <el-form-item label="响应报文">
          <a v-if="bwinfo.resBodyFile" :href="bwinfo.resBodyFile" target="_blank">下载</a>
          <span v-else>无</span>
        </el-form-item>

      </el-form>
    </el-dialog>


  </d2-container>
</template>

<script>
import draggable from 'vuedraggable'
import VueGridLayout from 'vue-grid-layout'
import newPolyline from '@/components/new-polyline/newPolyline'
import { Loading } from 'element-ui';

import { request } from '@/api/service'

export default {
  name: 'indexComponent',
  components: {
    draggable,
    GridLayout: VueGridLayout.GridLayout,
    GridItem: VueGridLayout.GridItem,
    newPolyline,
    Loading
  },
  data () {
    const endDate = new Date();
    const startDate = new Date();
    startDate.setTime(startDate.getTime() - 3600 * 1000 * 24 * 6); // 设置为最近7天
    return {
      ydhListDate: [this.formatDate(startDate), this.formatDate(endDate)],
      ydhList: [],
      ydhType: [
        {
          value: 1,
          label: '发运中'
        },
         {
          value: 2,
          label: '已签收'
        }, 
        {
          value: 3,
          label: '审核'
        }, 
        {
          value: 4,
          label: '上传'
        }
      ],
      ydh_info_show: false,
      ydhinfo:{},
      bwinfo:{},
      bw_info_show: false,
      ydhTypeValue: 3,
      currentPage: 1,
      pageSize: 15,
      total: 0,
      urls: []
    }
  },
  async created () {
    this.layout = await this.$store.dispatch('d2admin/db/get', {
      dbName: 'sys',
      path: 'grid-layout',
      defaultValue: JSON.parse(JSON.stringify(this.defaultLayout)),
      user: true
    }, { root: true })
  },
  mounted () {
    this.$emit('on-mounted')
    this.search_list()
  },
  computed: {
    allYdhListCheck: {
      get(){
        return this.ydhList.every(item => item.isChecked)
      },
      set(checked){
        if (checked){
          // 所有选项都要被选中
          this.ydhList.forEach(element => {
            element.isChecked = true
          });
        }
        else{
          this.ydhList.forEach(item => item.isChecked = false)
        }
      }
    },
  },
  watch: {
    
  },
  methods: {
    // 时间格式化
    formatDate(date) {
        var myyear = date.getFullYear();
        var mymonth = date.getMonth() + 1;
        var myweekday = date.getDate();
        var h = date.getHours();
        if (mymonth < 10) {
          mymonth = "0" + mymonth;
        }
        if (myweekday < 10) {
          myweekday = "0" + myweekday;
        }
        // h = h < 10 ? "0" + h : h;
        // var m = date.getMinutes();
        // m = m < 10 ? "0" + m : m;
        // var s = date.getSeconds();
        // s = s < 10 ? "0" + s : s;
        return (
          myyear + "-" + mymonth + "-" + myweekday
        );
    },

  

    search_list() {
      var url = '/api/getwaybillyjdjlist/'
      var that = this
      request({ url: url ,params: { start_time: this.ydhListDate[0], end_time: this.ydhListDate[1],type: this.ydhTypeValue}}).then(ret => {

        if(ret.data){
          // 初始化全选按钮
          for (const billsItem of ret.data["datarows"]) {
            billsItem["isChecked"] = false

            // 历史路由
            if(billsItem["ydlsinfo"]){
              let ydlsinfo_arr = billsItem["ydlsinfo"].split("####")
              
              billsItem["ydlsinfo"] = []
              for(const v of ydlsinfo_arr){
                let ydlsinfo_time = v.slice(0,16)
                let ydlsinfo_content = v.slice(16)
                billsItem["ydlsinfo"].push({
                  timestamp:ydlsinfo_time,
                  content:ydlsinfo_content
                })
              }
            }

            // 未来路由
            if(billsItem["ydwlinfo"]){
              let ydwlinfo_arr = billsItem["ydwlinfo"].split("####")
              
              billsItem["ydwlinfo"] = []
              for(const v of ydwlinfo_arr){
                let ydwlinfo_time = v.slice(0,16)
                let ydwlinfo_content = v.slice(16)
                billsItem["ydwlinfo"].push({
                  timestamp:ydwlinfo_time,
                  content:ydwlinfo_content
                })
              }
            }
          }

          that.ydhList = ret.data["datarows"]
          that.total = ret.data.total
        }else{
          that.ydhList = []
          that.total = 0
        }

        that.$message.success('加载完成')
        

      })
    },
    show_ydhinfo(item){
      this.ydh_info_show = true
      this.ydhinfo = item
    },
    show_bwinfo(item) {
      
      this.bw_info_show = true
      this.bwinfo = item
    },
    show_qcwd(item){
      if(item.qcwdsj){
        window.open(item.qcwdsj, '_blank');
      }else{
        this.$message.info('暂无相关文件')
      }
      
    },
    handleCurrentChange(currentPage){
      this.currentPage = currentPage;
      var url = '/api/messagelist/'
      var that = this
      request({ url: url ,params: { start_time: this.ydhListDate[0], end_time: this.ydhListDate[1],type: this.ydhTypeValue,page: this.currentPage}}).then(ret => {
        that.ydhList = ret.data["data"]
        that.total = ret.data.count
      })
    },

    message_action(item,index,tag) {
      var that = this
      if(tag == 'cb'){
        that.loading = true
        return request({
          url: '/api/messageaction_cb/',
          method: 'post',
          data: {
            slwbr_ydh: item.slwbr_ydh,
            slwbr_cuswbno: item.slwbr_cuswbno,
            slwbr_fhdw: item.slwbr_fhdw,
            slwbr_shdw: item.slwbr_shdw,
            slwbr_thsj: item.slwbr_thsj,
            slwbr_qssj: item.slwbr_qssj,
            slwbr_wdmax: item.slwbr_wdmax,
            slwbr_wdmin: item.slwbr_wdmin,
            maxtem: item.maxtem,
            mintem: item.mintem
          }
        }).then(response => {
          if(response.code == 2000){
            that.loading = false
            that.$message.success('处理成功')
          }else{
            that.$message.info(response.msg)
          }
          
        }).finally(() => {
          that.loading = false
        })

      }else if(tag == "sh_pass"){
        that.loading = true
        return request({
          url: '/api/messageaction_pass/',
          method: 'post',
          data: {
            slwbr_ydh: item.slwbr_ydh,
            type:1 //审核通过
          }
        }).then(response => {
          if(response.code == 2000){
            that.loading = false
            that.ydhList[index].slwbr_yjdjzt = '审核通过'
            that.$message.success('处理成功')
          }else{
            that.$message.info(response.msg)
          }
          
        }).finally(() => {
          that.loading = false
        })
      }else if(tag == "sh_nopass"){
        that.loading = true
        this.$prompt('请输入说明', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {
          return request({
            url: '/api/messageaction_pass/',
            method: 'post',
            data: {
              slwbr_ydh: item.slwbr_ydh,
              slwbr_cuswbno: item.slwbr_cuswbno,
              slwbr_fhdw: item.slwbr_fhdw,
              slwbr_shdw: item.slwbr_shdw,
              slwbr_thsj: item.slwbr_thsj,
              slwbr_qssj: item.slwbr_qssj,
              slwbr_wdmax: item.slwbr_wdmax,
              slwbr_wdmin: item.slwbr_wdmin,
              maxtem: item.maxtem,
              mintem: item.mintem,
              remark: value,
              type:2 //审核不通过
            }
          }).then(response => {
            if(response.code == 2000){
              that.loading = false
              that.ydhList[index].slwbr_yjdjzt = '审核不通过'
              that.$message.success('处理成功')
            }else{
              that.$message.info(response.msg)
            }
            
          }).finally(() => {
            that.loading = false
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });

        });
      }else if(tag == 'to_dsh'){
        that.loading = true
        return request({
          url: '/api/messageaction_to_dsh/',
          method: 'post',
          data: {
            slwbr_ydh: item.slwbr_ydh,
          }
        }).then(response => {
          if(response.code == 2000){
            that.ydhList[index].slwbr_yjdjzt = '待审核'
            that.$message.success('处理成功')
            that.loading = false
          }else{
            that.$message.info(response.msg)
          }
          
        }).finally(() => {
          that.loading = false
        })
      }else if(tag == 'upload' || tag == 'reupload'){
        that.loading = true
        return request({
          url: '/api/messageaction_upload/',
          method: 'post',
          data: {
            slwbr_ydh: item.slwbr_ydh,
          }
        }).then(response => {
          if(response.code == 2000){
            that.ydhList[index].slwbr_yjdjzt = '上传中'
            that.$message.success('处理成功')
            that.loading = false
          }else{
            that.$message.info(response.msg)
          }
          
        }).finally(() => {
          that.loading = false
        })
      }

      

    }

    



  },
  beforeDestroy() {
    // 清除定时任务
    // clearInterval(this.intervalId);
  }
}
</script>

<style lang="scss">
@font-face{font-family:electronicFont;src:url('~@/assets/fonts/DS-DIGIT.TTF')}


img {
    max-width: none !important;
}

.el-dialog__header{
  background: #333366;
}
.warm_style .el-dialog__header{
 background: red;
}
.warm_style .el-dialog__headerbtn .el-dialog__close{
color: #fff
}
.el-dialog__title{
  color: #fff
}

.el-dialog__body {
  border-bottom:1px solid #333366
}
.dialog-footer .el-button--success{
  background-color: #333399;
  border-color: #333399;
}

.dialog-footer .el-button--success:hover{
  background-color: #333366;
  border-color: #333366;
}

.wl .el-range-editor .el-range-input {
 background: transparent;
 font-size: 12px;
 line-height: 24px;
 color: rgba(255, 255, 255, .8)
}

.wl .el-date-editor .el-range__icon {
  line-height: 24px !important;
}

.wl .el-date-editor .el-range-separator {
  color: rgba(255, 255, 255, .8);
  font-size: 12px;
  line-height: 24px;
  width: 20px
}

.wl .el-popper[x-placement^=bottom] { 
  background: rgb(5, 18, 81);
  color: rgba(255, 255, 255, .8);
}

.el-date-table th {
  color: rgba(255, 255, 255, .8);
}

.wl .el-input__inner {
  height: 24px;
  line-height: 24px;
  color: rgba(255, 255, 255, .8);
  background: transparent;
  border: 0;
  padding: 0 8px;
}

.wl .el-input__icon {
  font-size: 12px;
  line-height: 24px;
  width: 20px
}

.wl .el-input--default {
  height: 30px;
  line-height: 30px;
  font-size: 12px;
}

.wl .el-select .el-input .el-select__caret {
  height: 24px;
  line-height: 24px;
}

.wl .el-select-dropdown__item.selected {
  background: #333366;
  color: rgba(255, 255, 255, .8)
}

.wl .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
  background: #333366;
  color: #efefef
}

.wl .el-select-dropdown__item {
  height: 24px;
  line-height: 24px;
  font-size: 12px;
  color: rgba(255, 255, 255, .8)
}

.wl .el-input--suffix .el-input__inner {
  padding-right: 20px;
}

.wl .el-date-table td.in-range div, .el-date-table td.in-range div:hover, .el-date-table.is-week-mode .el-date-table__row.current div, .el-date-table.is-week-mode .el-date-table__row:hover div {
  background: #333366;
  color: rgba(255, 255, 255, .8)
}

.wl .el-date-editor .el-range__close-icon {
  width: 1px;
}





.demo-image__lazy {
    height: 400px;
    overflow-y: auto;
}

.demo-image__lazy .el-image {
    display: block;
    min-height: 200px;
    margin-bottom: 10px;
}

</style>



<style scoped lang="scss">
::v-deep .d2-container-full__body {
  padding: 0!important;
}


input {
  -webkit-appearance:auto !important
}

input[type="checkbox" i] {
  margin:0 !important
}

*::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    opacity: 0.5;
    background-color: transparent;
    color: transparent
}

.b-box-100{
  width:100%;
  padding:0 20px;
  float:left;
}
.tit{
  display:flex;
  align-items: flex-end;
}

.tit span {
    background: url("~@/assets/image/line1.png") no-repeat bottom right;
    font-size: 20px;
    white-space: nowrap;
    padding-bottom: 10px;
    padding-right: 20px;
    color:#fff
}

.tit p {
    background: url("~@/assets/image/line2.png") no-repeat bottom right;
    width: 100%;
    height: 13px;
    margin-bottom: 5px;
    opacity: .5;
}

.boxnav {
  height: 100%;
  padding: 10px 5px;
  display: block;
  height: 800px;

}

.table-row {
  overflow: hidden;
  overflow-y: scroll;
  width: 100%
}

.boxnav .search{
  width: 100%;
  float: left
}

.boxnav .search-date {
  width: 300px;
  float: left;
}

.boxnav .search-type {
  width: 180px;
  float: left;
}

.el-date-editor--daterange.el-input__inner {
  width: auto;
  font-size: 12px;
  height: 30px;
  line-height: 30px;
  background: transparent;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  border-radius: 0px;
  padding: 3px 5px;
}

.el-date-editor .el-range__close-icon {
  width: 10px;
}


.logistics-list-table{
  width: 100%
}

.logistics-list-table-header{
  width:100%;
  float: left;
  border-bottom: 1px solid #407abd;
}

.logistics-list-table-body {
  width: 100%;
  float: left;
  border-bottom: 1px dotted #407abd;
}

.logistics-list-table-th {
    font-size: 14px;
    padding: 10px 0;
    color: rgba(255, 255, 255, .8);
    float: left;
    text-align:center;
    line-height:35px;
    font-weight: bold;
}

.logistics-list-table-td{
  font-size: 14px;
  padding: 10px 0px;
  color: rgba(255, 255, 255, 1);
  text-align:center;
  align-items: center;
  float: left;
  word-break: break-all; 
  font-size: 12px
}

.logistics-list-table-spana {
  color: #B5A642;
  cursor:pointer;
  font-size: 14px;
  padding: 10px 0px;
  font-size: 12px
}

.search-btn {
  width: 14%;
  float: left;
}

.search-btn .el-button--primary {
  padding: 8px 5px;
  background: transparent;
  color: rgba(255, 255, 255, .8);
  border: 0;
  font-size: 12px;
}

.search-btn .el-button--primary:focus,.search-btn .el-button--primary:hover {
  background: #333366;
  color: rgba(255, 255, 255, .8);
}

.logistics-list-table-td .el-button--primary {
  padding: 8px 5px;
  background: transparent;
  color: rgba(255, 255, 255, .8);
  border: 0;
  font-size: 12px;
}

.logistics-list-table-td .el-button--primary:focus,.logistics-list-table-td .el-button--primary:hover {
  background: #66b1ff;
  color: rgba(255, 255, 255, .8);
}

.search-down {
  width: 14%;
  float: left
}

.b-box{
  padding:0 20px;
  float:left;
}

.bm-view {
  height: 700px;
}

.pagination-center {
  text-align:center
}



</style>
